<template>
    <h2>角色管理</h2>
    <div style="text-align: left">
        <el-button type="primary" @click="dialogAddRoleVisible = true">添加角色</el-button>
    </div>
    <el-table :data="rolerList" stripe style="width: 100%">
        <el-table-column prop="id" label="编号" width="180" />
        <el-table-column prop="name" label="角色" width="180">
            <template #default="scope">
                <el-input v-if="scope.row.edit" v-model="scope.row.name"></el-input>
                <span v-else>{{ scope.row.name }}</span>
            </template>

        </el-table-column>
        <el-table-column prop="rdesc" label="描述" />
        <el-table-column fixed="right" label="操作" width="200">

            <template #default="scope">
                <el-button v-if="!scope.row.edit" size="small" type="primary" @click="handleEdit(scope.row)">
                    修改
                </el-button>

                <el-button v-else size="small" type="primary" @click="handleSave(scope.row)">
                    保存
                </el-button>

                <el-button size="small" type="danger" @click="handleDelete(scope.row.id)">
                    删除
                </el-button>
                <el-button size="small" type="primary" @click="roleAndMenus(scope.row.id)">
                    授权
                </el-button>
            </template>
        </el-table-column>
    </el-table>

    <el-pagination layout="prev, pager, next" :total="total" @current-change="getRoleList"
        v-model:current-page="currentPage" />


    <el-dialog v-model="dialogAddRoleVisible" title="添加角色" width="80%">

        <!-- 对话框中添加form -->
        <el-form :model="rolerForm" label-width="120px">
            <el-form-item label="角色名称">
                <el-input v-model="rolerForm.name" style="width: 80%" />
            </el-form-item>
            <el-form-item label="角色描述">
                <el-input v-model="rolerForm.rdesc" style="width: 80%" />
            </el-form-item>


            <el-form-item>
                <el-button type="primary" @click="onAddRoler">保存</el-button>
                <el-button @click="dialogAddRoleVisible = false">取消</el-button>
            </el-form-item>
        </el-form>

    </el-dialog>

    <el-dialog v-model="dialogRoleMenusVisible" width="50%" title="角色授权">
        <!--  添加tree组件  -->
        <el-tree :props="props2" :data="treeNodeList2" show-checkbox default-expand-all node-key="id" ref="treeRef"/>
        <!-- 添加按钮组件   -->
        <el-button type="primary" @click="saveRolesMenus">保存权限</el-button>
        <el-button type="success" @click="dialogRoleMenusVisible = false">取消</el-button>

    </el-dialog>
</template>

<script setup>
import axios from 'axios';
import { ElMessage } from 'element-plus';
import { onMounted, reactive, ref } from 'vue';

const treeNodeList2 = ref([])
const treeRef = ref(null)
var global_rid = 0
const dialogRoleMenusVisible = ref(false)
const props2 = {
    id: 'id',
    label: 'label',
    children: 'children'
};

function roleAndMenus(rid) {
    global_rid = rid;
    dialogRoleMenusVisible.value = true;
    //发送ajax请求获得树节点数据
    axios.get("http://localhost:8081/allMenus")
        .then((resp) => {
            treeNodeList2.value = resp.data;
            axios.get("http://localhost:8081/loadRoleMid/" + rid).then((resp) => {
                console.log(resp.data)
                treeRef.value.setCheckedKeys(resp.data)

            }).catch((error) => {
                console.log(error)
            })
        })
        .catch((error) => {
            console.log(error);
        })
}

function saveRolesMenus() {
    //获得tree控件中被选中的节点,包含父节点
    var nodes = treeRef.value.getCheckedNodes(false, true);
    //声明数组
    var arr = [global_rid];
    nodes.forEach((item) => {
        arr.push(item.id);
    });
    console.log(arr)
    axios.post("http://localhost:8081/grantRoleMenus", arr)
        .then((resp) => {
            if (resp.data.code == 200) {
                //关闭对话框
                dialogRoleMenusVisible.value = false;
                ElMessage({ message: resp.data.msg, type: 'success' })
            } else {
                ElMessage.error(resp.data.msg);
            }
        })
        .catch((error) => {
            console.log(error);
        })
}

const rolerList = ref([])
const currentPage = ref(1)
const total = ref()


const dialogAddRoleVisible = ref(false);
const rolerForm = reactive({
    name: '',
    rdesc: ''
})

function handleDelete(id) {
    axios.get("http://localhost:8081/deleteRoler/" + id)
        .then((resp) => {
            if (resp.data.code == 200) {
                //刷新列表
                getRoleList(currentPage.value)
                ElMessage({ message: resp.data.msg, type: 'success' })
            } else {
                ElMessage.error(resp.data.msg);
            }
        })
        .catch((error) => {
            console.log(error);
        })
}

function onAddRoler() {
    axios.post("http://localhost:8081/addRoler", rolerForm)
        .then((resp) => {
            if (resp.data.code == 200) {
                dialogAddRoleVisible.value = false;
                rolerForm.name = '';
                rolerForm.rdesc = '';
                getRoleList(currentPage.value)
                ElMessage({ message: resp.data.msg, type: 'success' })
            } else {
                ElMessage.error(resp.data.msg);

            }
        })
        .catch((error) => {
            console.log(error);
        })
}

function handleEdit(row) {
    row.edit = true;
}

function handleSave(row) {
    //发送ajax请求进行数据更新
    axios.post("http://localhost:8081/updateRoler", row)
        .then((resp) => {
            if (resp.data.code == 200) {
                row.edit = false;
                getRoleList(currentPage.value)
                ElMessage({ message: resp.data.msg, type: 'success' })
            } else {
                ElMessage.error(resp.data.msg);

            }
        })
        .catch((error) => {
            console.log(error);
        });
}

function getRoleList(page) {
    axios.get("http://localhost:8081/listRolers?pageNum=" + page).then((resp) => {
        rolerList.value = resp.data.list
        total.value = resp.data.total

    })

}

onMounted(() => {
    getRoleList(1)
})
</script>

<style scoped></style>